<template>
	<view class="parent-view">
		<!-- 顶部搜索框 -->
		<input class="search-edit-txt" placeholder="搜索" type="text" confirm-type="search"
		 @confirm="searchXing"  @input="onKeyInput"/>
		<!-- 百家姓氏树 -->
		<view style="width: 97%;height: 1006rpx;margin-left: 2%;margin-top: 27rpx;">
			<image style="width: 97%;height: 1006rpx;display: block;"
			 src="http://sq-file.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210728185435.png"
			  mode="aspectFit" @click="toWeb"></image>
		</view>
		<!-- 我的姓氏 -->
		<view v-if="xing&&userPQD" class="my-xing-view">
			<view class="my-xing-view-bg">
				<image style="height: 67rpx;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_top.png" mode="scaleToFill"></image>
				<image style="flex: 1;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_center.png" mode="scaleToFill"></image>
				<image style="height: 65rpx;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_bottom.png" mode="scaleToFill"></image>
			</view>
			<!-- 姓氏先祖 -->
			<view class="my-xings-content-view">
				<view class="xing-xianzu-view">
					<text v-if="xing.length==1" class="xing-tv">{{xing}}</text>
					<text v-else class="xing-tv" style="font-size: 60rpx;">{{xing}}</text>
					<!-- 先祖名称 -->
					<view class="xing-xianzu-name-view" @click="goShiZu">
						<text class="xing-xianzu-name">{{familyNameSource.getname}}</text>
						<image class="xing-xianzu-name-arrow" src="../../static/white-right-arrow.png" mode="scaleToFill" />
					</view>
					<!-- 活跃度 -->
					<text class="xing-huoyuedu">人气:{{familyNameSource.hap}}</text>
					<text class="xing-huoyuedu">百家姓:{{familyNameSource.Rank}}</text>
					<text class="xing-huoyuedu">总人口:{{familyNameSource.PopulationCount}}</text>
				</view>
				<!-- 姓氏介绍 -->
				<view v-if="familyNameSource.desc" class="xing-desc" @click="goShiZu">{{familyNameSource.desc}}</view>
				<view v-else class="xing-desc">待完善</view>
			</view>
			<view class="my-xing-view-title">
				<image class="my-xing-view-image" src="../../static/fhm_detail_title_bg.png" mode="scaleToFill"></image>
				<text class="my-xing-view-txt">我的姓氏</text>
			</view>
		</view>
		<!-- 百家姓 -->
		<view class="baijia-view">
			<view class="my-xing-view-bg" :style="{height:bgHeight}">
				<image style="height: 67rpx;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_top.png" mode="scaleToFill"></image>
				<image style="flex: 1;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_center.png" mode="scaleToFill"></image>
				<image style="height: 65rpx;width: 96%;margin-left: 2%;" src="../../static/fhm_detail_content_bg_bottom.png" mode="scaleToFill"></image>
			</view>
			<view class="baijia-content-view">
				<!-- 字母排序列表 -->
				<view class="zimu-item">
					 <text  v-for="(item , index) in zimuList" :class="isSelectZimu==index?'zimu-item-tv-select':'zimu-item-tv'"
					 @click="selectData" :data-index="index">{{item.name}}</text>
				</view>
				 <!-- 百家姓列表 -->
				<view class="baijiaxing-item" >
					<text v-for="(item , index) in selectXingShiList"
					:class="item.name.length>1?item.name.length>2?'baijiaxing-item-four-tv'
					:'baijiaxing-item-two-tv':'baijiaxing-item-one-tv'" 
					 @click="menuClick" :data-index="item.name">{{item.name}}</text>
				</view>
			</view>
			<view class="bajiaxing-view-title">
				<image class="bajiaxing-view-image" src="../../static/fhm_detail_title_bg.png" mode="scaleToFill"></image>	
				<text class="bajiaxing-view-txt">百家姓氏</text>
			</view>
		</view>
		<button class="share-page-btn" open-type="share">
			<image style="width: 315rpx;height: 96rpx;" src="../../static/icon_page_share_btn.png" mode="scaleToFill"></image>
		</button>
		<LoginTipDialog :isShow="isShowLoginTip" dataSource="登录查看具体信息"  @returnLoginTipDialog="returnLoginTipDialog"/>
	</view>
</template>

<script>
	import request from '../index/request.js';
	import cnchar from 'cnchar';
	import LoginTipDialog from "@/components/login-tip-dialog/login-tip-dialog.vue";
	
	export default {
		components: {
			LoginTipDialog
		},
		data() {
			return {
				xing:"",
				userPQD:"",
				searchKey:"",
				bgHeight: 0,
				isSelectZimu:-1,
				familyNameSource:{
				},
				zimuList: [{
						name: "A"
					},
					{
						name: "B"
					},
					{
						name: "C"
					},
					{
						name: "D"
					},
					{
						name: "E"
					},
					{
						name: "F"
					},
					{
						name: "G"
					},
					{
						name: "H"
					},
					{
						name: "I"
					},
					{
						name: "J"
					},
					{
						name: "K"
					},
					{
						name: "L"
					},
					{
						name: "M"
					},
					{
						name: "N"
					},
					{
						name: "O"
					},
					{
						name: "P"
					},
					{
						name: "Q"
					},
					{
						name: "R"
					},
					{
						name: "S"
					},
					{
						name: "T"
					},
					{
						name: "U"
					},
					{
						name: "V"
					},
					{
						name: "W"
					},
					{
						name: "X"
					},
					{
						name: "Y"
					},
					{
						name: "Z"
					},
					{
						name: "全"
					}
				],
				xingshiList:[
				],
				selectXingShiList:[
				],
				isShowLoginTip:false,
				bajiaxingViewTitleUrl:"",
			}
		},
		methods: {
			onLoad:function(options){
				this.appUtil.saveAppInviteId(options)
			},
			onShow:function(){
				this.loginState()
				this.xing=uni.getStorageSync("shiqin-user-xing")
				var user=uni.getStorageSync("shiqin-user")
				this.share.title = "中华姓氏"
				this.share.url='/pages/surnames/index?appInviteId='+this.appUtil.getAppInviteId()
				this.share.shareType=0
				this.userPQD=user.PQD
				if(this.xing&&user.PQD){
					this.getFamilyNameSource()
				}
				if(this.xingshiList.length==0){
					this.getXingShiListV2()
				}
			},
			getFamilyNameSource:function(){
				var that=this
				request.post("api/common/SearchFamilyNameSource",{
					FamilyName:this.xing
				}).then(data=>{
					that.familyNameSource=data
				})
			},
			getXingShiListV2:function(){
				var that=this
				request.post("api/common/ZHXingShi",{
					page:""
				}).then(data=>{
					that.xingshiList=data.datas
					that.xingshiList.forEach(item => {
						this.selectXingShiList.push(item)
					})
					that.getBgHeight()
				})
			},
			selectData:function(e){
				var index=e.currentTarget.dataset.index
				this.isSelectZimu=index
				for (var i = 0; i < this.selectXingShiList.length; i++) {
					this.selectXingShiList.splice(i)
				}
				if(index===26){
					this.xingshiList.forEach(item => {
						this.selectXingShiList.push(item)
					})
				}else{
					this.xingshiList.forEach(item => {
						var xing=""
						if(item.name.length>1){
							xing=item.name.substr(0,1)
						}else{
							xing=item.name;
						}
						var shouzimu=cnchar.spell(xing,'first','up')
						if (shouzimu === this.zimuList[index].name) {
							this.selectXingShiList.push(item)
						}
					})
				}
				this.getBgHeight()
			},
			getBgHeight:function(){
				var that=this
				if(that.selectXingShiList.length%4===0){
					that.bgHeight=((that.selectXingShiList.length/4)*120+200)+'rpx'
				}else{
					that.bgHeight=((that.selectXingShiList.length/4+1)*120+200)+'rpx'
				}
			},
			menuClick:function(e){
				uni.navigateTo({
					url: '/pages/home-menu-detail/index?title=始祖&xing='+e.currentTarget.dataset.index
				})
			},
			onKeyInput: function(event) {
				this.searchKey = event.target.value
			},
			searchXing:function(){
				if(this.searchKey){
					if(this.searchKey.length>2){
						uni.showToast({
							title:"姓氏搜索不得超过两个字符",
							icon:"none"
						})
						return
					}
					uni.navigateTo({
						url: '/pages/home-menu-detail/index?title=始祖&xing='+this.searchKey
					})
				}
			},
			goShiZu:function(){
				uni.navigateTo({
					url: '/pages/home-menu-detail/index?title=始祖&xing='+this.xing
				})
			},
			toWeb:function(){
				var that=this
				request.post("api/common/H5_page_v2", {
					id: "149"
				}).then(data => {
					uni.navigateTo({
						url: '/pages/article-details/index?load_url='
						+encodeURIComponent(data.url)+"&title="+data.name
					})
				})
			},
			loginState:function(){
				var user = uni.getStorageSync("shiqin-user")
				if (!user.PQD) {
					this.isShowLoginTip=true
				}
			},
			returnLoginTipDialog:function(e){
				this.isShowLoginTip=e.isclose
				if(e.tag){
					uni.navigateTo({
						url:"../index/index"
					})
				}
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
